<template>
    <div>
        <el-button @click="handleClick">添加</el-button>
        <el-input v-model="text"></el-input>
        
        
        <div ref="container"></div>
    </div>
</template>
<script>
import "pixi.js";
export default {
  data() {
    return {
      app: null,
      text: "你好",
      grounp: []
    };
  },
  methods: {
    handleClick() {
      
      var layer = new PIXI.Container();
      layer.index = this.app.stage.children.length
      this.app.stage.addChild(layer);
      layer.interactive = true;
      
      layer.x = Math.random() * 600;
      layer.y = Math.random() * 600;

      var img = new PIXI.Sprite.fromImage("static/icon1.png");
      layer.addChild(img);
      img.anchor.set(0.5);
      img.interactive = true;
      img.buttonMode = true;
      img.on("pointerdown", onDragStart).on("click", showHandles);

      var text = new PIXI.Text(this.text, {
        fontSize: 16,
        fill: 0xffffff,
        align: "center"
      });

      layer.addChild(text);
      text.anchor.set(0.5);
      text.y = 70;

      var btnGrounp = new PIXI.Container();
      layer.addChild(btnGrounp);
      btnGrounp.y = -70;
      btnGrounp.visible = false;

      var addBtn = new PIXI.Text("添加", {
        fontSize: 16,
        fill: 0xffffff,
        align: "center"
      });
      addBtn.interactive = true;
      addBtn.buttonMode = true;
      addBtn.anchor.set(0.5);
      addBtn.x = -50;

      var editBtn = new PIXI.Text("修改", {
        fontSize: 16,
        fill: 0xffffff,
        align: "center"
      });
      editBtn.interactive = true;
      editBtn.buttonMode = true;
      editBtn.anchor.set(0.5);

      var deleteBtn = new PIXI.Text("删除", {
        fontSize: 16,
        fill: 0xffffff,
        align: "center"
      });
      deleteBtn.interactive = true;
      deleteBtn.buttonMode = true;
      deleteBtn.anchor.set(0.5);
      deleteBtn.x = 50;

      btnGrounp.addChild(addBtn);
      btnGrounp.addChild(editBtn);
      btnGrounp.addChild(deleteBtn);

      function onDragStart(event) {
        this.parent
          .on("pointermove", onDragMove)
          .on("pointerup", onDragEnd)
          .on("pointerupoutside", onDragEnd);
        this.parent.data = event.data;
        this.parent.alpha = 0.5;
        this.parent.dragging = true;
      }

      function onDragEnd(event) {
        this.alpha = 1;
        this.dragging = false;
        this.data = null;
      }

      function onDragMove(event) {
        if (this.dragging) {
          var newPosition = this.data.getLocalPosition(this.parent);
          this.x = newPosition.x;
          this.y = newPosition.y;
        }
      }

      var bunnys = this.app.stage.children
      function showHandles() {
        for(var i = 0; i < bunnys.length; i++){
          if(bunnys[i].index == this.parent.index){
            if(bunnys[i].children[2].visible == false){
              bunnys[i].children[2].visible = true
            }else {
              bunnys[i].children[2].visible = false
            }
          }else {
            bunnys[i].children[2].visible = false
          }
        }
      }
    }
  },
  mounted() {
    this.app = new PIXI.Application();
    this.$refs.container.appendChild(this.app.view);
  }
};
</script>